<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
          name="viewport">
    <title>管理主页</title>
    <link rel="stylesheet" href="/admin/css/app.css?v=1.0.1">
    {#        <link rel="stylesheet" href="/admin/css/media.css">#}
    <link rel="stylesheet" href="/admin/css/font.css">
    <link rel="stylesheet" href="/admin/css/layout.css?v=1.0.0">
    <link rel="stylesheet" href="/admin/css/layoutPosition.css?v=1.0.0">
    <link rel="stylesheet" href="/admin/css/color.css?v=1.0.0">
    <link rel="stylesheet" href="/admin/css/border.css?v=1.0.0">
    <link rel="stylesheet" href="/admin/css/flex.css?v=1.0.0">
    {#    <link rel="stylesheet" href="/admin/css/fa.css">#}
    {#    <link rel="stylesheet" href="/admin/css/index.css">#}
    <link rel="stylesheet" href="/layui/css/layui.css?v=1.0.1">
    {#    <link rel="stylesheet" href="/admin/css/main.css?v=1.0.2">#}
    <link rel="stylesheet" href="/admin/css/muse-ui.css?v=1.0.2">
    <link rel="stylesheet" href="/admin/css/muse-ui-toast.all.css?v=1.0.2">
    <link rel="stylesheet" href="/admin/css/muse-ui-loading.all.css?v=1.0.2">
    {% set assetsRoot = "/themes/sano" %}
    {% set rnd = "?rnd="~random() %}

    <link rel="stylesheet" href="{{ assetsRoot }}/dist/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ assetsRoot }}/dist/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
          href="{{ assetsRoot }}/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="{{ assetsRoot }}/dist/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="{{ assetsRoot }}/dist/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="{{ assetsRoot }}/dist/css/custom.css{{ rnd }}">
    <link rel="stylesheet" href="{{ assetsRoot }}/dist/css/demo.css{{ rnd }}">
    <link rel="stylesheet" href="{{ assetsRoot }}/dist/css/style.css{{ rnd }}">
    <style>
        iframe {
            overflow: hidden;
            outline: none;
            background-color: transparent;
            border: none;
            width: 100%;
        }

        /*html,body{*/
        /*    overflow: hidden;outline: none;*/
        /*}*/
        html {
            width: 95%;
            margin: 0px auto 0 0;
            padding: 0px;
        }

        .sf-toolbar, .demo-settings {
            display: none !important;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .2s;
        }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
        {
            opacity: 0;
        }

        body::-webkit-scrollbar {
            display: none
        }

    </style>
    {#    <style> html { overflow-x:hidden; } </style>#}
</head>

<body>
<div id="Page">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>
        <nav class="navbar navbar-expand-lg main-navbar">
            <form class="form-inline mr-auto">
                <ul class="navbar-nav mr-3">
                    <li>
                        <a href="#" data-toggle="sidebar" class="nav-link nav-link-lg">
                            <i class="ion ion-navicon-round"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none">
                            <i class="ion ion-search"></i>
                        </a>
                    </li>
                </ul>
                {#                <div class="search-element">#}
                {#                    <input class="form-control" type="search" placeholder="Search" aria-label="Search">#}
                {#                    <button class="btn" type="submit"><i class="ion ion-search"></i></button>#}
                {#                </div>#}
            </form>

            <ul class="navbar-nav navbar-right">
                <li class="dropdown dropdown-list-toggle">
                    <a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep">
                        <i class="ion ion-ios-bell-outline"></i>
                    </a>
                    <div class="dropdown-menu dropdown-list dropdown-menu-right">
                        <div class="dropdown-header">系统消息
                            <div class="float-right">
                                <a href="#">查看全部</a>
                            </div>
                        </div>
                        <div class="dropdown-list-content">
                            <a href="#" class="dropdown-item dropdown-item-unread">
                                <img alt="image" src="{{ assetsRoot }}/dist/img/avatar/avatar-1.jpeg"
                                     class="rounded-circle dropdown-item-img">
                                <div class="dropdown-item-desc">
                                    <b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
                                    <div class="time">10 Hours Ago</div>
                                </div>
                            </a>
                            <a href="#" class="dropdown-item dropdown-item-unread">
                                <img alt="image" src="{{ assetsRoot }}/dist/img/avatar/avatar-2.jpeg"
                                     class="rounded-circle dropdown-item-img">
                                <div class="dropdown-item-desc">
                                    <b>Ujang Maman</b> has moved task <b>Fix bug footer</b> to <b>Progress</b>
                                    <div class="time">12 Hours Ago</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
                        <i class="ion ion-android-person d-lg-none"></i>
                        <div class="d-sm-none d-lg-inline-block">Hi, {{ admin.nickName }}</div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
{#                        <a @click="click('/admin/Chat','首页')" class="dropdown-item has-icon">#}
{#                            <i class="ion ion-android-person"></i>修改密码#}
{#                        </a>#}
                        <a href="{{ path("BackFrameLogout") }}" class="dropdown-item has-icon">
                            <i class="ion ion-log-out"></i> 注销
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
        {#        侧边栏 start#}
        <div class="main-sidebar">
            <aside id="sidebar-wrapper">
                <div class="sidebar-brand">
                    <a href="{{ path('BackIndex') }}">管理后台</a>
                </div>
                <div class="sidebar-user">
                    <div class="sidebar-user-picture">
                        <img alt="image" src="{{ assetsRoot }}/dist/img/avatar/avatar-1.jpeg">
                    </div>
                    <div class="sidebar-user-details">
                        <div class="user-name">{{ admin.name }}</div>
                        <div class="user-role">
                            {{ admin.nickName }}
                        </div>
                    </div>
                </div>
                <ul class="sidebar-menu">
                    <li class="menu-header">总览</li>
                    <li :class="curUrl == '/admin/Chat'?'active':''">
                        <a @click="click('/admin/Chat','首页')"><i class="ion-speedometer"></i><span>首页</span></a>
                    </li>
                    {% for root in menuTree %}
                        <li class="menu-header">{{ root.name }}</li>
                        {% for item in root.sons %}
                            {% if item.sons|length > 0 %}
                                {#                                有下级分类#}
                                <li>
                                    {% if item.icon %}
                                        <a href="#" class="has-dropdown"><i
                                                    class="{{ item.icon }}"></i><span>{{ item.name }}</span></a>
                                    {% else %}
                                        <a href="#" class="has-dropdown"><i
                                                    class="ion-arrow-right-b"></i><span>{{ item.name }}</span></a>
                                    {% endif %}
                                    <ul class="menu-dropdown">
                                        {% for son in item.sons %}
                                            <li :class="curUrl == '{{ son.url }}'?'active':''">
                                            {% if son.icon|length > 0 %}
                                                <a class="padl10" @click="click('{{ son.url }}','{{ son.name }}')">
                                                    <i class="{{ son.icon }}"></i>
                                                    {{ son.name }}
                                                </a>
                                            {% else %}
                                                <a class="padl10" @click="click('{{ son.url }}','{{ son.name }}')">
                                                    <i class="ion-ios-circle-outline"></i>
                                                    {{ son.name }}
                                                </a>
                                            {% endif %}
                                            </li>{% endfor %}
                                    </ul>
                                </li>
                            {% else %}
                                {#                                没有下级分类#}
                                <li :class="curUrl == '{{ item.url }}'?'active':''">
                                    <a @click="click('{{ item.url }}','{{ item.name }}')"><i
                                                class="{{ item.icon }}"></i><span>{{ item.name }}</span></a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                    {#                    系统初期菜单 start#}
                    {#                    <li class="menu-header">系统初期菜单</li>#}
                    {#                    {% for item in menu %}#}
                    {#                        <li>#}
                    {#                            <a  @click="click('/admin/{{ item.name }}','{{item.title}}')">#}
                    {#                                <i class="ion-ios-circle-outline"></i>#}
                    {#                                {{ item.title }}#}
                    {#                            </a>#}
                    {#                        </li>#}
                    {#                    {% endfor %}#}
                    {#                    系统初期菜单 end#}
                </ul>
                <div class="p-3 mt-4 mb-4">
                    <a href="{{ path("BackFrameLogout") }}"
                       class="btn btn-danger btn-shadow btn-round has-icon has-icon-nofloat btn-block">
                        <i class="ion ion-help-buoy"></i>
                        <div>注销</div>
                    </a>
                </div>
            </aside>
        </div>
        {#        侧边栏 end#}
        {#        主体 start#}
        <div class="main-content ">
            <div class="container-fluid pos-r">
                <iframe name="main" class="pos-a" width="100%" allowTransparency="true" style="overflow-y: scroll"
                        :style="'height: ' + height + 'px;'" src="/admin/Chat" v-show="cur == 999"></iframe>
                <transition name="fade" v-for="item,index in list">
                    <iframe class="pos-a" width="100%" allowTransparency="true" style="overflow-y: scroll"
                            :style="'height: ' + height + 'px;'" :src="item.url" v-show="cur == index"></iframe>
                </transition>
            </div>

        </div>
        {#        主体 end#}
    </div>
    {#        右侧按钮组 start#}
    <div class="right-btn">
        <div>
            <div @click="show(999)" class="btn btn-sm" :class="cur == 999?'btn-primary':'btn-outline-primary'"> 首页</div>
        </div>
        <div v-for="item,index in list">
            <div @click="show(index)" class="btn btn-sm" :class="cur == index?'btn-primary':'btn-outline-primary'">
                [[item.name]]
            </div>
        </div>
        {#        <div class="" v-show="list.length > 0"><div @click="close()" class="btn btn-sm btn-outline-secondary"> <i class="ion ion-close fs10 padl5 padr5"></i> </div></div>#}
        {#        <div class="" v-show="list.length > 0"><div @click="goback()" class="btn btn-sm btn-outline-secondary"> <i class="ion ion-reply fs12 padl5 padr5"></i> </div></div>#}
        <div class="" v-show="list.length > 5">
            <div @click="clear()" class="btn btn-sm btn-outline-secondary"><i
                        class="ion ion-trash-a fs12 padl5 padr5"></i></div>
        </div>
    </div>
    {#        右侧按钮组 end#}
</div>


{#<script src="/admin/js/jquery-1.10.2.min.js"></script>#}
<script src="{{ assetsRoot }}/dist/modules/jquery.min.js"></script>
<script src="{{ assetsRoot }}/dist/modules/popper.js"></script>
<script src="{{ assetsRoot }}/dist/modules/tooltip.js"></script>
<script src="{{ assetsRoot }}/dist/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="{{ assetsRoot }}/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="{{ assetsRoot }}/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="{{ assetsRoot }}/dist/js/sa-functions.js"></script>


<script src="/layui/layui.all.js"></script>
{#<script src="/admin/js/jquery-1.10.2.min.js"></script>#}
{#<script src="/admin/js/api.js?v=1.1.5"></script>#}
<script src="/admin/js/main.js?v={{ rnd }}"></script>
<script src="/admin/js/0app.js?v={{ rnd }}"></script>
{#<script src="/admin/js/0window.js?v=1.0.0"></script>#}
<script src="/admin/js/0mvvm.es5.js?v={{ rnd }}"></script>
<script src="/admin/js/0list.js?v=1.0.0"></script>
{#<script src="/admin/js/0init.js?v=1.0.0"></script>#}

{#<script src="/admin/layer/layer.js?v=1.0.0"></script>#}

{#<script src="/admin/js/vue.js"></script>#}
{#<script src="/admin/js/muse-ui.js"></script>#}
{#<script src="/admin/js/muse-ui-loading.js"></script>#}

<script src="/admin/js/vue.min.es5.js"></script>
<script src="/admin/js/muse-ui.es5.js"></script>
<script src="/admin/js/muse-ui-loading.es5.js"></script>

{% block myJs %}{% endblock %}
{% block script %}{% endblock %}
<script>
    var Page;
    $(document).ready(
        function () {

            Page = createVM("#Page", {
                cur: 999
                , curUrl: "/back/welcome"
                , height: 300
                , list: []
            }, {
                init: function () {
                    this.height = $(window).outerHeight() - 61
                }
                , click: function (url, name) {
                    var list = this.list
                    var find = 0;
                    for (var i in list) {
                        if (list[i].url == url) {
                            find = i * 1 + 1;
                        }
                    }
                    console.log(url)
                    console.log(name)
                    console.log(find)
                    if (find > 0) {
                        this.cur = find - 1;
                    } else {
                        this.list.push({
                            url: url
                            , name: name
                        });
                        this.cur = this.list.length - 1;
                    }
                    this.curUrl = url

                }
                , show: function (index) {
                    if (index === 999) {
                        this.cur = 999
                        this.curUrl = "/back/welcome"
                    } else {
                        this.cur = index
                        this.curUrl = this.list[index].url
                    }
                }
                , clear: function () {
                    this.cur = 999
                    this.curUrl = "/back/welcome"
                    this.list = []
                }
                , close: function () {
                    console.log(this.cur)
                    if (this.cur == 999) {
                        return;
                    }
                    this.list = arrayDelIndex(this.list, this.cur);
                    if (this.cur > 0) {
                        this.show(this.cur - 1)
                    } else {
                        this.show(999)
                    }
                }
            });
            Page.init();
        }
    );
</script>
<script src="{{ assetsRoot }}/dist/js/scripts.js{{ rnd }}"></script>
<script src="{{ assetsRoot }}/dist/js/custom.js{{ rnd }}"></script>
<script src="{{ assetsRoot }}/dist/js/demo.js{{ rnd }}"></script>
</body>
</html>